<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备操作记录系统</title>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            color: #333;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(to right, #2c3e50, #4a6491);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        h1 {
            font-size: 24px;
            font-weight: 500;
        }
        
        .export-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .export-btn:hover {
            background-color: #3e8e41;
        }
        
        .table-container {
            overflow-x: auto;
            padding: 20px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        thead th {
            background-color: #f8f9fa;
            font-weight: 600;
            position: sticky;
            top: 0;
            box-shadow: 0 1px 0 #e0e0e0;
        }
        
        tbody tr {
            transition: background-color 0.2s;
            cursor: pointer;
        }
        
        tbody tr:hover {
            background-color: #f5f9ff;
        }
        
        .expanded {
            background-color: #f0f7ff;
        }
        
        .sub-table-container {
            display: none;
        }
        
        .expanded + .sub-table-container {
            display: table-row;
        }
        
        .sub-table-container td {
            padding: 0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .sub-content {
            padding: 20px;
            background-color: #f8fafc;
        }
        
        .statistics {
            display: flex;
            gap: 15px;
            padding: 15px;
            background-color: #e8f4fd;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 15px;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .stat-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        
        .color-1 { background-color: #4CAF50; }
        .color-2 { background-color: #2196F3; }
        .color-3 { background-color: #FF9800; }
        
        .sub-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .sub-table th {
            background-color: #e8f4fd;
        }
        
        .sub-table th, .sub-table td {
            padding: 10px 15px;
            border: 1px solid #e0e0e0;
        }
        
        .sub-table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        footer {
            text-align: center;
            padding: 15px;
            color: #666;
            font-size: 14px;
            border-top: 1px solid #e0e0e0;
        }
        
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 15px;
            }
            
            th, td {
                padding: 8px 10px;
                font-size: 14px;
            }
            
            .statistics {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>设备操作记录系统</h1>
            <button class="export-btn" id="export-excel">导出到Excel</button>
        </header>
        
        <div class="table-container">
            <table id="devices-table">
                <thead>
                    <tr>
                        <th>设备名称</th>
                        <th>设备编号</th>
                        <th>操作次数</th>
                    </tr>
                </thead>
                <tbody id="devices-body">
                    <!-- 设备行将通过JavaScript动态生成 -->
                </tbody>
            </table>
        </div>
        
        <footer>
            <p>设备操作记录系统 &copy; 2023</p>
        </footer>
    </div>

    <script>
        // 生成模拟数据
        function generateDevicesData(count) {
            const devices = [];
            const deviceTypes = ['离心机', '反应釜', '干燥箱', '搅拌器', '过滤器', '泵'];
            const operations = ['1#阀开', '2#阀开', '关阀', '启动', '停止', '清洗', '参数调整'];
            const operators = ['张三', '李四', '王五', '赵六', '钱七', '孙八'];
            
            for (let i = 1; i <= count; i++) {
                const deviceType = deviceTypes[Math.floor(Math.random() * deviceTypes.length)];
                const operationCount = Math.floor(Math.random() * 50) + 10;
                
                // 生成操作记录
                const operationRecords = [];
                for (let j = 0; j < operationCount; j++) {
                    const operation = operations[Math.floor(Math.random() * operations.length)];
                    const operator = operators[Math.floor(Math.random() * operators.length)];
                    const now = new Date();
                    const time = new Date(now.getTime() - Math.random() * 7 * 24 * 60 * 60 * 1000);
                    operationRecords.push({
                        name: operation,
                        time: time.toLocaleString(),
                        operator: operator
                    });
                }
                
                devices.push({
                    id: i,
                    name: `${deviceType}-${i}`,
                    number: `SB-${String(i).padStart(3, '0')}`,
                    operationCount: operationCount,
                    operations: operationRecords
                });
            }
            
            return devices;
        }
        
        // 渲染设备表格
        function renderDevicesTable(devices) {
            const tbody = document.getElementById('devices-body');
            tbody.innerHTML = '';
            
            devices.forEach(device => {
                // 主设备行
                const row = document.createElement('tr');
                row.className = 'device-row';
                
                row.innerHTML = `
                    <td>${device.name}</td>
                    <td>${device.number}</td>
                    <td>${device.operationCount}</td>
                `;
                
                // 子表格行
                const subRow = document.createElement('tr');
                subRow.className = 'sub-table-container';
                subRow.innerHTML = `
                    <td colspan="3">
                        <div class="sub-content">
                            <div class="statistics">
                                <div class="stat-item">
                                    <span class="stat-color color-1"></span>
                                    <span>1#阀开: ${device.operations.filter(op => op.name === '1#阀开').length}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-color color-2"></span>
                                    <span>2#阀开: ${device.operations.filter(op => op.name === '2#阀开').length}</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-color color-3"></span>
                                    <span>关阀: ${device.operations.filter(op => op.name === '关阀').length}</span>
                                </div>
                            </div>
                            <table class="sub-table">
                                <thead>
                                    <tr>
                                        <th>操作名称</th>
                                        <th>操作时间</th>
                                        <th>操作者</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${device.operations.map(op => `
                                        <tr>
                                            <td>${op.name}</td>
                                            <td>${op.time}</td>
                                            <td>${op.operator}</td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                    </td>
                `;
                
                // 添加点击展开/折叠功能
                row.addEventListener('click', () => {
                    row.classList.toggle('expanded');
                });
                
                tbody.appendChild(row);
                tbody.appendChild(subRow);
            });
        }
        
        // 导出到Excel
        function exportToExcel(devices) {
            // 创建工作簿
            const wb = XLSX.utils.book_new();
            
            // 为每个设备创建一个工作表
            devices.forEach(device => {
                // 准备工作表数据
                const wsData = [
                    ['设备名称', device.name],
                    ['设备编号', device.number],
                    ['总操作次数', device.operationCount],
                    [], // 空行
                    ['操作统计'],
                    ['1#阀开', device.operations.filter(op => op.name === '1#阀开').length],
                    ['2#阀开', device.operations.filter(op => op.name === '2#阀开').length],
                    ['关阀', device.operations.filter(op => op.name === '关阀').length],
                    [], // 空行
                    ['操作记录'],
                    ['操作名称', '操作时间', '操作者'] // 表头
                ];
                
                // 添加操作记录
                device.operations.forEach(op => {
                    wsData.push([op.name, op.time, op.operator]);
                });
                
                // 创建工作表
                const ws = XLSX.utils.aoa_to_sheet(wsData);
                
                // 将工作表添加到工作簿
                // 工作表名称不能包含特殊字符，这里进行简单处理
                const sheetName = device.name.replace(/[\\/*[\]:?]/g, '_').substring(0, 31);
                XLSX.utils.book_append_sheet(wb, ws, sheetName);
            });
            
            // 生成Excel文件并下载
            XLSX.writeFile(wb, '设备操作记录.xlsx');
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            const devices = generateDevicesData(24);
            renderDevicesTable(devices);
            
            // 添加导出按钮事件
            document.getElementById('export-excel').addEventListener('click', () => {
                exportToExcel(devices);
            });
        });
    </script>
</body>
</html>